<template>
  <PageWrapper dense contentFullHeight fixedHeight>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">新增单价</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="[
            {
              label: '修改',
              disabled: record.isHistory,
              onClick: handleEdit.bind(null, record),
            },
            {
              ifShow: () => (record.type != 1 && record.type !== 4) && !record.isHistory,
              label: `配置`,
              onClick: handleSetting.bind(null, record, 'setting'),
            },
            {
              ifShow: () => !record.isHistory,
              label: '历史单价',
              onClick: handleSetting.bind(null, record, 'history'),
            },
            {
              label: '删除',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                placement: 'left',
                confirm: handleDelete.bind(null, record.id),
              },
            },
          ]" />
        </template>
      </template>
    </BasicTable>
    <ModalAddRecord @register="registerModal" @success="handleSuccess" />
    <ModalAddRecord2 @register="registerModal2" @success="handleSuccess" />
    <DrawerSetting @register="registerDrawer" @success="handleSuccess" />
    <DrawerSetting2 @register="registerDrawer2" @success="handleSuccess" />
  </PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page'
import { BasicTable, useTable, TableAction } from '@/components/Table'
import { reactive, computed, ref, vShow } from 'vue'
import { useModal } from '@/components/Modal'
import ModalAddRecord from './ModalAddRecord.vue'
import ModalAddRecord2 from './ModalAddRecord2.vue'
import { searchFormSchema, columns } from './data'
import { useDrawer } from '@/components/Drawer'
import DrawerSetting from './DrawerSetting.vue'
import DrawerSetting2 from './DrawerSetting2.vue'
import { getPriceList, deleteRecordPrice } from '@/api/sys/energyUnitPrice'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'

defineOptions({ name: 'EnergyUnitPrice' })

const [registerDrawer, { openDrawer }] = useDrawer()
const [registerDrawer2, { openDrawer: openDrawer2 }] = useDrawer()

const searchInfo = reactive<Recordable>({})
const [registerTable, { updateTableDataRecord, reload, setLoading }] = useTable({
  title: '单价配置',
  api: getPriceList,
  columns,
  useSearchForm: true,
  rowKey: 'id',
  searchInfo,
  beforeFetch: (params) => {
    if (params.date) {
      const { date, ...others } = params
      return {
        ...others,
        startDateBegin: dayjs(date[0]).startOf('day'),
        startDateEnd: dayjs(date[1]).endOf('day'),
      }
    }
    return params
  },
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
    autoSubmitOnEnter: true,
  },
  actionColumn: {
    width: 220,
    title: '操作',
    dataIndex: 'action',
  },
})
const [registerModal, { openModal }] = useModal() //这个组件 一个传递给组件 ，openModal打开modal组件，往里面放要显示的数据
const [registerModal2, { openModal: openModal2 }] = useModal() //这个组件 一个传递给组件 ，openModal打开modal组件，往里面放要显示的数据
const handleCreate = () => {
  openModal(true, {
    record: {}, // 传递空对象，清空表单
    isUpdate: false, // 标记为新增操作
  });
}
const handleEdit = (record) => {
  console.log(record);
  openModal(true, {
    record,
    isUpdate: true,
  })
}
const handleDelete = (id) => {
  deleteRecordPrice({ id }).then((res) => {
    message.success('删除成功')
    reload()
  })
}
const handleSetting = (record, modalType) => {
  if (!record.isHistory && modalType === 'history') {
    openModal2(true, {
      record,
      isUpdate: true,
    })
    return
  }
  if (record.type == '3') {
    openDrawer2(true, {
      record,
      isUpdate: true,
    })
  } else {
    openDrawer(true, {
      record,
      isUpdate: true,
    })
  }
}
const batchDelete = () => { }
const handleSuccess = ({ isUpdate, values }) => {
  if (isUpdate) {
    // 演示不刷新表格直接更新内部数据。
    // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
    const result = updateTableDataRecord(values.id, values)
    reload()
  } else {
    reload()
  }
}
</script>